Design Preview
All co·bee UI pages. Click → to preview, ↓ to download a single file, or use Download All to get everything as a ZIP.
Main container — topbar, bottom nav, drawer sidebar, iframe. Entry point for the full app.
Event feed, event detail, order & payment, My Purchase, and My Group views.
Member profile — notifications, edit profile, security, addresses, and logout.
KPIs, charts, fulfilment status, top products & buyers, closing soon, collections, and activity feed.
List of all hosted events. Create, manage, and archive group buy events.
3-step event creation — basic info, add products/items, closing and collection settings.
Same 3-step form, plus a "Quick Fill with AI" panel — paste a message or photo and it fills the form for you.
Full-width orders table — filter, search, manage payment status and fulfilment.
Full-width product catalogue — manage items, pricing, options, and stock.
Create and manage packing lists per event. Track items packed per buyer.
Map with P/numbered delivery markers, drag-to-reorder sequence, expandable map view, Mark Collected.
Member table — view, filter, edit permissions, remove members, track activity.
Group profile, appearance, color scheme, group settings, default options, and payment methods.
Base shell with all CSS variables, component styles, and sidebar structure. Starting point for new pages.
HTML email template (table-based, inline styles) with merge tags — sent when a host clicks Remind or Remind All on the Dashboard.
Same template with sample data filled in (Gerald Pang, $55.00, 21 days) — for a quick look at real rendered output.
Sent when an admin approves a host's request and creates a new group for them — includes group name, role, and status.
Filled with sample data (vinhtayns, Da Nang groupby 2, Admin, Active) for a quick look at real rendered output.
Sent with new login credentials and a temporary password — includes a security notice to change the password on first login.
Filled with sample data (vinhtayns@gmail.com, temp password 6262, Da Nang groupby) for a quick look at real rendered output.
Sent to a buyer with their order summary and a PayNow QR code to scan and complete payment directly from their banking app.
Filled with sample data (Minh Cong, $11.50, M6 group) including a real generated QR code — for a quick look at real rendered output.
Sent right after a buyer places an order — order summary plus an "Order & Payment" button for cases payment isn't done via QR.
Filled with sample data (Minh Cong, $24.70, M6 group) for a quick look at real rendered output.
Starter shell with the shared header/footer plus every reusable section (status pill, info box, button) commented — for building the next email.